<template>
  <div class="app-container">
    <el-container>
      <el-header v-if="isAuthenticated">
        <app-header />
      </el-header>
      <el-main>
        <router-view />
      </el-main>
      <el-footer v-if="isAuthenticated">
        <app-footer />
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import AppHeader from './components/layout/AppHeader.vue'
import AppFooter from './components/layout/AppFooter.vue'

export default {
  name: 'App',
  components: {
    AppHeader,
    AppFooter
  },
  setup() {
    const store = useStore()
    
    // 如果本地存储有token，尝试自动登录
    onMounted(() => {
      const token = localStorage.getItem('token')
      if (token) {
        store.dispatch('auth/loadUser')
      }
    })
    
    // 是否已登录
    const isAuthenticated = computed(() => store.getters['auth/isAuthenticated'])
    
    return {
      isAuthenticated
    }
  }
}
</script>

<style>
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f5f7fa;
}

.app-container {
  min-height: 100vh;
}

.el-header, .el-footer {
  background-color: #409EFF;
  color: #fff;
  padding: 0;
}

.el-main {
  padding: 20px;
  min-height: calc(100vh - 120px);
}
</style>